import React, { useState, useEffect } from 'react'
import { Card } from "antd";
import EquipmentState from "./EquipmentState";
import EquipmentReissue from "./EquipmentReissue";
import EquipmentChange from "./EquipmentChange";
import EquipmentAdd from "./EquipmentAdd";

const tabList = [
    {
        key: '1',
        tab: '设备重新下发',
    },
    {
        key: '2',
        tab: '设备替换',
    },
    {
        key: '3',
        tab: '新设备下发',
    },
    {
        key: '4',
        tab: '查询设备状态',
    }
];

interface tabParams {
    key: string
}

const contentList = [
    {
        key: '1',
        tab: <EquipmentReissue />,
    },
    {
        key: '2',
        tab: <EquipmentChange />,
    },
    {
        key: '3',
        tab: <EquipmentAdd />,
    },
    {
        key: '4',
        tab: <EquipmentState />,
    }
];

export default function EquipmentManipulate() {

    const [tabParams, setTabParams] = useState<tabParams>({key:'1'})

    return (
        <div>
            <Card style={{ margin: '20px', padding: "24px" }}
                  headStyle={{ marginBottom: '24px' }}
                  bordered={false}
                  tabList={tabList}
                  activeTabKey={tabParams.key}
                  onTabChange={key => {
                      setTabParams({ key: key })
                  }}
            >
                {contentList[parseInt(tabParams.key)-1].tab}
            </Card>
        </div>

    )


}